import React, { useState, useEffect } from 'react';
import cls from 'classnames';
import { connect } from 'umi';
import { Checkbox } from 'antd';
import _ from 'lodash';
import AutoHeightScroller from '@/components/containers/autoHeightScroller';
import styles from './index.less';
import { CloseOutlined } from '@ant-design/icons';
import { jsapi, viewUtils } from '@/utils/arcgis';

const LayerList = ({ dispatch, bimList, addedBimList, onClose = () => {}, tileLayers }) => {
  const [isHideGoogleLayer, setIsHideGoogleLayer] = useState(false);
  const [tileLayerTitle, setTileLayerTitle] = useState('');
  const [updateTileLayer, setUpdateTileLayer] = useState(0);
  const [tileLayersChecked, setTileLayersChecked] = useState<string[]>([]);

  useEffect(() => {
    if (!updateTileLayer) return;
    viewUtils.isViewReady().then(view => {
      const lyr = view.map.layers.find(l => l.title === tileLayerTitle);
      if (lyr) {
        lyr.visible = !lyr.visible;
      }
    });
  }, [tileLayerTitle, updateTileLayer]);

  useEffect(() => {
    viewUtils.isViewReady().then(view => {
      let result = view.map.allLayers.items.reduce((r, c) => {
        if (!c.visible) {
          r.push(c.title);
        }
        return r;
      }, []);
      setTileLayersChecked(result);
    });
  }, [updateTileLayer]);

  function hanleLayerToggle(item) {
    setTileLayerTitle(item.title);
    setUpdateTileLayer(i => i + 1);
  }

  return (
    <div className={styles.wrap}>
      <div className={cls(styles.head, 'base-panel-title')}>
        图层管理
        <span className={cls('base-panel-title-btn')} onClick={onClose}>
          <CloseOutlined></CloseOutlined>
        </span>
      </div>
      <div className={cls(styles.content, 'base-panel-body')}>
        <AutoHeightScroller>
          <div style={{ padding: '20px 0' }}>
            {!!tileLayers.length &&
              tileLayers.map(e => {
                return (
                  <div key={e.title} className={styles.checkItem}>
                    <Checkbox
                      checked={tileLayersChecked.indexOf(e.title) === -1}
                      onChange={() => {
                        hanleLayerToggle(e);
                      }}
                    >
                      {e.title}
                    </Checkbox>
                  </div>
                );
              })}

            {bimList && bimList.length ? (
              bimList.map(m => {
                return m.name !== 'S11标道路' &&
                  m.name !== 'S12标道路' &&
                  m.name !== '高浪路道路模型' ? (
                  <div className={styles.checkItem} key={m.bimId}>
                    <Checkbox
                      key={m.bimId}
                      checked={addedBimList.some(k => k == m.bimId)}
                      onChange={e => {
                        dispatch({
                          type: 'bimmodel/toggleBimLayer',
                          payload: {
                            id: m.bimId,
                            active: e.target.checked,
                          },
                        });
                      }}
                    >
                      {m.name}
                    </Checkbox>
                  </div>
                ) : null;
              })
            ) : (
              <div style={{ color: '#ffffff', padding: '30px 0', textAlign: 'center' }}>
                模型图层加载中...
              </div>
            )}
          </div>
        </AutoHeightScroller>
      </div>
    </div>
  );
};

export default connect(({ bimmodel, app }) => {
  return {
    bimList: bimmodel.bimList,
    addedBimList: bimmodel.addedBimList,
    tileLayers: app.tileLayers,
  };
})(LayerList);
